﻿@{
    ViewBag.Title = "Home Page";
}

@section Scripts {
  <script type="text/javascript" src="@Url.Content("~/Scripts/knockout-2.2.0.js")"></script>
  <script type="text/javascript">

    function AppViewModel() {
        var self = this;
        self.loggedIn = @(Request.IsAuthenticated ? "true" : "false")

        self.products = ko.observableArray();
        self.cart = ko.observableArray();
        self.orders = ko.observableArray();
        self.details = ko.observable();

        function ProductViewModel(root, product) {
            var self = this;
            self.ProductId = product.Id;
            self.Name = product.Name;            // where(Name == "Vodka");
            self.Price = product.Price;
            self.VatRate = product.VatRate;
            self.Quantity = ko.observable(0);

            self.addItemToCart = function () {
                var qty = self.Quantity();
                if (qty == 0) {
                    root.cart.push(self);
                }
                self.Quantity(qty + 1);
            };

            self.removeAllFromCart = function () {
                self.Quantity(0);
                root.cart.remove(self);
            };
        }

        function OrderDetailsViewModel(order) {
            var self = this;
            self.items = ko.observableArray();
            self.Id = order.Id;

            self.total = ko.computed(function () {
                var sum = 0;
                $.each(self.items(), function (index, item) {
                    sum += item.Price * item.Quantity;
                });
                return '€' + sum.toFixed(2);
            });

            $.getJSON("/api/orders/" + order.Id, function (order) {
                $.each(order.Details, function (index, item) {
                    self.items.push(item);
                })
            });
        };

        self.resetCart = function() {
            var items = self.cart.removeAll();
            $.each(items, function (index, product) {
                product.Quantity(0);
            });
        }

        self.getDetails = function (order) {
            self.details(new OrderDetailsViewModel(order));
        }

        //creates new order and adds it to the db
        self.createOrder = function () {
            var jqxhr = $.ajax({
                type: 'POST',
                url: "api/orders",
                contentType: 'application/json; charset=utf-8',
                data: ko.toJSON({ Details: self.cart }),
                dataType: "json",
                success: function (newOrder) {
                    self.resetCart();
                    self.orders.push(newOrder);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    self.errorMessage(errorThrown);
                }  
            });
        };

        // Initialize the view-model.
        $.getJSON("/api/products", function (products) {
            $.each(products, function (index, product) {
                self.products.push(new ProductViewModel(self, product));
            })
        });

        $.getJSON("api/orders", self.orders);
    };
    


    $(document).ready(function () {
        ko.applyBindings(new AppViewModel());
    });

  </script>
}

                            <!--####################### Menu listing #######################-->

<div class="content">
    
    <div class="float-left">
    <h1>Drinks</h1>
       <ul id="products" data-bind="foreach: products">
         <li>
            <div>
                <span data-bind="text: Name"></span> 
                <span class="price" data-bind="text: '€' + Price"></span> 
            </div>

            <div class="float right" data-bind="if: $parent.loggedIn">
                <button data-bind="click: addItemToCart">Select</button>
            </div>
          </li>
         </ul>
     </div>

    
        

                         <!--################### Cart #########################-->

       <div id="cart" class="float-right
           " data-bind="visible: cart().length >= 0">
        <h1>Selected Items</h1>
            <table class="details ui-widget-content">
             <thead>
                  <tr><td>Item</td><td>Price</td><td>Quantity</td><td>VatRate</td></tr>
             </thead>    
             <tbody data-bind="foreach: cart">
                <tr>
                   <td><span data-bind="text: $data.Name"></span></td>
                   <td>€<span data-bind="text: $data.Price"></span></td>
                   <td class="qty"><span data-bind="text: $data.Quantity()"></span></td>
                   <td><span data-bind="text: $data.VatRate + '%'"></span></td>
                   <td><a href="#" data-bind="click: removeAllFromCart">Remove</a></td>
                </tr>
             </tbody>
            </table>

            <input type="button" data-bind="click: createOrder" value="Add to Order"/>
       </div>


                <!--####################### Orders List #######################-->
    <!--
        <div id="orders-area" class="content" >
           <div class="float-left">
             <ul id="orders" data-bind="foreach: orders">
                <li class="ui-widget-content">
                   <a href="#" data-bind="click: $root.getDetails">
                   <h2>View Total Order</h2><span data-bind="data:$data.Id"></span></a>
                </li>
            </ul>
          </div>    
        </div>   
        -->
    <div>
        <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
    </div>
                
                            <!--###################### Orders Detail ####################-->

            <div id="order-details" class="float-right" data-bind="if: details(), visible:order-details().length >=0"> 
            <h2>Total Order</h2> <!--<span data-bind="text: details().Id"></span></h2>-->
                <table class="details ui-widget-content">
                    <thead>
                      <tr><td>Item</td><td>Price</td><td>Quantity</td><td>Subtotal</td></tr>
                    </thead>    
                    <tbody data-bind="foreach: details().items">
                      <tr>
                       <td><span data-bind="text: $data.Product"></span></td>
                       <td><span data-bind="text: $data.Price"></span></td>
                       <td><span data-bind="text: $data.Quantity"></span></td>
                       <td><span data-bind="text: $data.VatRate"></span></td>
                       <td>
                         <span data-bind="text: ($data.Price * $data.Quantity).toFixed(2)"></span>
                       </td>
                     </tr>
                    </tbody>
                </table>


        Sub Total: <span data-bind="text: details().total"></span><br />
        Vat: <span data-bind="text: 50 * 10"></span><br />
        Total: <span data-bind="text: details().total"></span>

            </div>
</div>
    